<template>
  <div class="zt-swiper">  
    <div class="zt-swiper__wrap"> 
      <mt-swipe v-if="swiperList.length" :auto="4000" :show-indicators="false" @change="handleSwipeChange">
        <mt-swipe-item v-for="item in swiperList" :key="item.id"> 
          <div class="zt-swiper__item">
          <img :src="item.link || item.xp" alt=""> 
          </div>
          <div v-show="personFile" class="zt-swiper__des">
            {{item.name}}
          </div> 
        </mt-swipe-item>
      </mt-swipe> 
      <div class="zt-swiper__suspicion" slot="xyd" v-if="xyd">
        嫌疑度{{xyd}}
      </div>
    </div>  
    <!-- <div class="zt-swiper__wrap">
      <div class="inner">
        <mt-swipe v-if="swiperList.length" :auto="4000" :show-indicators="false" @change="handleSwipeChange">
          <mt-swipe-item v-for="item in swiperList" :key="item.id"> 
            <div class="zt-swiper__item">
            <img :src="item.link || item.xp" alt=""> 
            </div>
            <div v-show="personFile" class="zt-swiper__des">
            {{item.name}}
            </div>
            <span class="zt-swiper__suspicion" v-show="personFile">嫌疑度 {{xyd}}</span> 
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </div> --> 
 
    <div class="zt-swiper__tool">
      <slot name="tool"></slot>
    </div>
    <div v-show="showPagi" class="zt-swiper__pagination">
      {{pageIndex+1}}/{{swiperList.length}}
    </div>
    
     
  </div>
</template>

<script>
  export default {
    props: {
      swiperList: {
        type: Array,
        default() {
          return []
        }
      },
      showPagi: {
        type: Boolean,
        default: false
      },
      personFile: {
        type: Boolean,
        default: false
      },
      xyd: ''
    },
    data() {
      return {
        pageIndex: 0
      }
    },
    components: {
    },
    filters: {
    },
    methods: {
      handleSwipeChange (index) {
        this.pageIndex = index
        this.$emit('handleSwipeChange', index)
      }
    },
    computed: {
    },
    mounted() {
    },
    created() {
      // console.log(spotLinkImg)
    }
  }
</script>
<style lang="scss" scoped>
.zt-swiper {
  width: 100%;
  height: 100%;
  position:relative;  
  &__wrap{
    width: 100%;
    height: 100%;
    .zt-swiper__item{
      height:100%;
      display: flex;
      align-items:center;
      justify-content:center;
      background:white;
      img{
        display:block;
        max-height:100%;
      }
    }  
  }
  
  &__tool{
    position:absolute; 
    left:0%; bottom:15px;
    width:100%;
    text-align:center;  
    z-index:10;
  }
  &__pagination{
    position:absolute; 
    right:15px; bottom:15px;
    padding:0 10px;
    color: white;
    border-radius:10px;
    background: rgba(0,0,0,0.3);
    z-index: 11;
  }
  &__des{
    position:absolute; 
    left:15px; bottom:15px;
    padding:0 10px;
    color: white;
    border-radius:10px;
    background: rgba(0,0,0,0.3);
    z-index: 11;
  }
  &__suspicion{
    text-align: center;
    height: 2rem;
    width: 6rem;
    line-height: 2rem;
    font-size: 1rem;
    color: #F6FAFB;
    position: absolute;
    top: 8%;
    right: 0%;
    border-radius: 15px 0 0 15px;
    background-color: #E96815;
  }
}
</style>